<template>
  <div class="menu-car">
    <!-- 加入接龙购物车弹窗 -->
    <van-popup
      v-model="dialogVisible"
      position="bottom"
      closeable
      round
      :style="{ height: '70vh' }">
      <div class="goods-con">
        <div class="goods-con-title">
          <span class="txt1">已选择商品</span>
          <span class="txt2">(共{{ items.length }}件)</span>
        </div>
        <van-list
          v-if="items.length > 0"
          v-model="loading"
          :immediate-check="true"
          :finished="finished"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          finished-text=""
          @load="goodsListLoadData"
        >
          <ul class="goods-con-wrap">
            <li class="g-box por"  v-for="(item, index) in items" :key="index">
              <section class="img-info">
                <img v-if="item.is_compress" :src="item.pic_url+'160x160'" width="90" height="90">
                <img v-else :src="item.pic_url" width="90" height="90">
              </section>
              <section class="g-flex">
                <div class="goods-title">{{item.title}}</div>
                <div class="goods-props">{{ item.props }}</div>
                <div class="goods-props">{{ item.item_date }}</div>
                <div class="goods-props">{{ item.item_memo }}</div>
                <div class="goods-flex">
                  <p class="goods-info" v-html="scaleGoodsPriceFn(item.price)"></p>
                  <div class="number-control">
                    <div class="ctrl">
                      <count-plug
                        :param="item"
                        :disabled="disabled"
                        :minLimit="0"
                        :itemId="item.item_id"
                        :skuId="String(item.sku_id)"
                        :supplier="item.supplier"
                        @getParam="getParam"
                        v-model="item.num"></count-plug>
                
                    </div>
                  </div>
                </div>
          
              </section>
            </li>
          </ul>
        </van-list>
        <div v-else>
          <no-data :noData=noData></no-data>
        </div>
      </div>
    </van-popup>
    
  </div>
</template>

<script>
  import { scaleGoodsPrice } from '@/utils/index'
  import { getSolitaireCartList, operateSolitaireCart } from '@/api/item/activity'
  import CountPlug from '@/components/CountPlug'
  import noData from '@/components/noData/index'
  import Vue from 'vue'
  import { Popup } from 'vant'
  
  Vue.use(Popup)
  export default Vue.extend({
    components: {
      noData,
      CountPlug
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    mounted() {
      this.dialogVisible = this.visible
      window.addEventListener('wxload', query => {
        this.activity_id = query.activity_id || this.$route.query.activity_id
        this.goodsListData()
      })
    },
    watch: {
      dialogVisible(val) {
        this.$emit('update:visible', val)
        if (val) {
          this.goodsListData()
        }
      },
      visible(val) {
        this.dialogVisible = val
      }
    },
    data() {
      return {
        activity_id: '',
        noData: {
          width: '184px',
          marginTop: '60px',
          txtMarginTop: '-30px',
          img: 'https://img.wifenxiao.com/h5-wfx/images/no_goods.png',
          text: '对不起，暂无商品数据'
        },
        error: false,
        loading: false,
        finished: false,
        p: 2,
        dialogVisible: false,
        resData: {},
        items: [],
        disabled: true,
        locked: true,
        dataArr: []
      }
    },
    methods: {
      // 修改数量
      getParam(val) {
        const param = {}
        param.num = val.number
        param.cart_id = val.cart_id
        operateSolitaireCart(param).then(res => {
          if (res.status == 1) {
            this.$emit('addSuccess')
            this.goodsListData()
          } else {
            this.goodsListData()
            this.$Error(res.msg)
          }
        })
        // // console.log(param, val, '<><><><>')
      },
      // 滑动获取商品数据
      goodsListLoadData() {
        if (!this.locked) {
          const data = {
            p: this.p
          }
          getSolitaireCartList(data)
            .then(res => {
              this.$loadingWrap.close()
              this.loading = false
              if (res.status == 1) {
                const data = res.data.list
                this.items = this.items.concat(data)
                this.p++
                if (res.data.list && res.data.list.length < 10) {
                  this.finished = true
                }
              } else {
                this.$Error(res.msg)
              }
            })
            .catch(() => {
              this.error = true
            })
        }
      },
      // 初次加载的数据
      goodsListData() {
        const data = {
          p: 1,
          activity_id: this.activity_id
        }
        getSolitaireCartList(data)
          .then(res => {
            this.$loadingWrap.close()
            this.loading = false
            if (res.status == 1) {
              const data = res.data.list
              this.items = data
              if (res.data.list && res.data.list.length < 10) {
                this.finished = true
              }
            } else {
              this.$Error(res.msg)
            }
            this.locked = false
          })
          .catch(() => {
            this.error = true
          })
      },
      scaleGoodsPriceFn(price) {
        return scaleGoodsPrice(price)
      },
      JumpName(url, data) {
        this.$JumpName(this, url, data)
      }
    }
  })
</script>

<style lang="scss">
  @import 'src/styles/mixin';
  .menu-car{
    .van-overlay{
      z-index: 10!important;
    }
    .van-popup--bottom.van-popup--round{
      z-index: 11!important;
    }
    .van-popup__close-icon--top-right{
      top: 24px;
    }
    .van-list{
      overflow: scroll;
      height: calc(70vh - 200px);
    }
    .goods-con{
      padding: 0;
      &-title{
        padding-left: 30px;
        border-bottom: 1px solid #EDEDED;
        height: 95px;
        line-height: 95px;
        .txt1{
          font-weight: bold;
          font-size: 28px;
          color: #333;
        }
        .txt2{
          color: #999999;
          font-size: 26px;
        }
      }
      &-wrap{
        padding: 0 30px;
        li{
          border-bottom: 1px solid #EEEEEE;
          display: flex;
          padding: 30px 0;
          .img-info{
            width: 180px;
            height: 180px;
            border-radius: 10px;
            overflow: hidden;
            margin-right: 20px;
          }
          .g-flex{
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            flex: 1;
            .goods-title{
              @include lineClamp(24px, 30px ,2);
            }
            .goods-props{
              color: #888;
              font-size: 24px;
            }
            .goods-flex{
              display: flex;
              align-items: center;
              justify-content: space-between;
            }
            .btn{
              width:136px;
              line-height:52px;
              border:1px solid rgba(246,18,46,1);
              border-radius:26px;
              text-align: center;
              font-size: 24px;
              color: #F6122E;
            }
          }
        }
      }
    }
  }
  
</style>
